<template>
  <div class="shishishuizhi">
    <div id="chart4"></div>
    <div class="selectshuizhi">
      <el-select
        v-model="selectValue"
        placeholder="请选择"
        style="width: 115px"
        size="mini"
        @change="selectChange"
      >
        <el-option label="01密闭水质PH" value="15030305400201"></el-option>
        <el-option label="03密闭PH" value="15030305301101"></el-option>
        <el-option label="05密闭PH" value="15030305202001"></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import axios from "@/utils/request";
export default {
  data() {
    return {
      myChart: null,
      selectValue: "15030305400201",
    };
  },
  methods: {
    echartsFn(phvalue) {
      const chartData = { min: 0, max: 15, value: phvalue };
      let option = {
        series: [
          {
            name: "ph值",
            type: "gauge",
            // center: ['50%', '90%'],
            center: ["50%", "80%"],
            radius: "100%",
            min: chartData.min,
            max: chartData.max,
            startAngle: 180,
            endAngle: 0,
            splitNumber: 15,
            axisLine: {
              lineStyle: {
                color: [
                  [0.066, "#EF1D23"],
                  [0.132, "#FF7B19"],
                  [0.198, "#F6C615"],
                  [0.264, "#F7E501"],
                  [0.33, "#B6D333"],
                  [0.396, "#86C045"],
                  [0.462, "#50B849"],
                  [0.528, "#35A944"],
                  [0.594, "#24B46F"],
                  [0.66, "#0ABAB7"],
                  [0.726, "#4690CF"],
                  [0.792, "#3A54A1"],
                  [0.858, "#59519E"],
                  [0.924, "#63459D"],
                  [1, "#422E83"],
                ],
                width: 40,
              },
            },
            splitLine: {
              // 分隔线
              show: false,
              length: 25,
              distance: 10,
              lineStyle: {
                width: 2,
                color: "auto",
              },
            },
            axisTick: {
              // 刻度线样式（及短线样式）
              show: false,
              lineStyle: {
                width: 2,
                color: "auto",
              },
              length: 10,
              distance: 5,
            },
            axisLabel: {
              // 刻度标签。
              show: true, // 是否显示标签,默认 true。
              color: "#CED5DD",
            },
            detail: {
              fontSize: "28",
              formatter: "{value}",
              color: "auto",
              offsetCenter: ["0", "0%"],
            },
            pointer: {
              icon: "triangle",
              show: true,
              offsetCenter: [0, "-50%"],
              itemStyle: {
                color: "auto",
              },
              length: "10%",
              width: "7%",
            },
            title: {
              // fontSize: 12,
              // offsetCenter: [0, -20],
            },
            data: [
              {
                value: chartData.value,
                name: "PH值",
                title: {
                  show: true,
                  color: "#CED5DD",
                  offsetCenter: [0, "-25%"],
                  fontSize: 16,
                },
              },
            ],
          },
          {
            name: "描述",
            type: "gauge",
            radius: "100%",
            min: 0,
            max: 15,
            // center: ['50%', '95%'],
            center: ["50%", "80%"],
            splitNumber: 15, //刻度数量
            startAngle: 180,
            endAngle: 0,
            z: 0,
            axisLine: {
              show: false,
            }, //仪表盘轴线

            axisLabel: {
              show: true,
              color: "#CED5DD",
              fontSize: 14,
              distance: -45,
              formatter: function (params) {
                var value = params.toFixed(0);
                if (value == 0) {
                  return "酸性";
                } else if (value == 7) {
                  return "中性";
                } else if (value == 15) {
                  return "碱性";
                } else {
                  return "";
                }
              },
            }, //刻度标签。

            axisTick: {
              splitNumber: 6,
              show: false,
              lineStyle: {
                color: "auto",
                width: 0,
              },
              length: 20,
            }, //刻度样式
            splitLine: {
              show: false,
              length: 0,
              lineStyle: {
                color: "auto",
                width: 0,
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    selectChange() {
      this.getList();
    },
    getList() {
      axios
        .post("/real/waterquality/realPoint/list", {
          inKeyList: [this.selectValue],
        })
        .then((res) => {
          this.echartsFn(res.data.list[0].dataValue);
        });
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chart4"));
    // 为窗口的resize事件绑定事件处理函数
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  created() {
    this.getList();
  },
  beforeDestroy() {
    // this.myChart.dispose()//销毁
    this.myChart.clear(); //销毁
  },
};
</script>
<style scoped lang="scss">
#chart4 {
  width: 100%;
  height: 300px;
}
.shishishuizhi {
  position: relative;
  .selectshuizhi {
    position: absolute;
    top: -30px;
    right: 10px;
  }
}
</style>
<style scoped lang="scss">
::v-deep .el-input--mini .el-input__inner {
  color: #dee1e6;
  background-color: #061f41;
  border: 1px solid #2769b0 !important;
  border-radius: 40px;
}
::v-deep .el-input {
  font-size: 10px;
}
</style>
